<template>
  <div style="margin-top: 25px">
    <div class="ruoyi-but">
      <el-button type="primary" @click="addFormField" style="margin-left: 25px">添加字段</el-button>
    </div>
    <!--表格字段-->
    <el-table ref="table" :data="propsData.tableProp.tableArray" border style="width: 100%;margin-top: 15px"
              :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
              :default-sort="{prop: 'sort', order: 'ascending'}"
              height="742"
    >
      <el-table-column label="序号" type="index" width="50" align="center" fixed="left"/>
      <el-table-column label="名称" width="170" :show-overflow-tooltip="true" align="center" prop="name">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" placeholder="请输入名称" clearable></el-input>
        </template>
      </el-table-column>
      <el-table-column label="数据类型" width="160" align="center" prop="name">
        <template slot-scope="scope">
          <el-select v-model="scope.row.type" placeholder="请选择数据类型">
            <el-option
                v-for="item in $store.state.tableFieldOption2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="字段相关配置" width="600" align="center" prop="field">
        <template slot-scope="scope">
          <ul class="design-table-ul">
            <li v-if="['单选框','多选框','下拉框'].includes(scope.row.type)" class="mt-12">
              <el-input type="textarea" placeholder="请输入我是文本域" v-model="scope.row.selectProp.text" :autosize="{ minRows: 2, maxRows: 4}" maxlength="30000" show-word-limit/>
            </li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column label="单位" width="150" align="center" prop="field">
        <template slot-scope="scope">
          <el-input v-model="scope.row.unit" placeholder="请输入单位" clearable></el-input>
        </template>
      </el-table-column>
      <el-table-column label="基础设置" align="left" prop="required">
        <template slot-scope="scope">
          <div class="design-table-content1">
            <el-checkbox v-model="scope.row.searchField" @change="searchFieldChange(scope.row.searchField,scope.row.id)">搜索字段就是资产名称</el-checkbox>
          </div>
          <div class="design-table-content1" v-show="!scope.row.searchField">
            <el-checkbox v-model="scope.row.isRequired">是否必填</el-checkbox>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="排序" width="100" :show-overflow-tooltip="true" align="center" sortable prop="sort" :sort-method="(a,b)=>{return a.sort - b.sort}">
        <template slot-scope="scope">
          <el-input v-model="scope.row.sort" placeholder="排序"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete el-icon--left" @click="delClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import {v4 as uuidv4} from 'uuid';

export default {
  components: {},
  props: ['propsData'],
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    //添加表格字段
    addFormField() {
      let jsonData = {
        id: uuidv4(),
        name: '',//名称
        type: '输入框',//数据类型
        sort: '0',//排序
        unit: '',//单位
        searchField: false,//搜索字段就是资产名称
        isRequired: false,//是否必填 true是
        //单选框-下拉框-多选框 数据来源
        selectProp: {
          text: `{label:'',value:''},`,
        }
      }
      this.propsData.tableProp.tableArray.push(jsonData);
    },
    //删除字段
    delClick(row) {
      for (let i = 0; i < this.propsData.tableProp.tableArray.length; i++) {
        if (this.propsData.tableProp.tableArray[i] == row) {
          this.propsData.tableProp.tableArray.splice(i, 1);
          return false
        }
      }
    },
    // 搜索字段是资产名称是唯一的
    searchFieldChange(val, id) {
      for (let i = 0; i < this.propsData.tableProp.tableArray.length; i++) {
          this.propsData.tableProp.tableArray[i].searchField = false;
      }
      if (val) {
        for (let i = 0; i < this.propsData.tableProp.tableArray.length; i++) {
          if (this.propsData.tableProp.tableArray[i].id == id) {
            this.propsData.tableProp.tableArray[i].searchField = val
          }
        }
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.ruoyi-but {

}
</style>
